<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('产值费用率')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .select-list li p {
        width: auto !important;
        margin-top: 7px !important;
    }

    .form-header {
        margin: 10px 0 0 0 !important;
    }

    .btn-group-sm {
        padding-top: 10px !important;
    }
</style>
<body class="gray-bg">

<div class="ui-layout-center">
    <div class="container-div">

        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="project-form">
                    <div class="col-sm-12">


                        <div class="select-list">
                            <ul>
                                <li>
                                    <p>工程公司：</p>
                                    <select name="compId" id="compId" class="form-control">
                                        <option value="">请选择</option>
                                        <option th:each="pro:${userComp}" th:value="${pro.compId}"
                                                th:text="${pro.compName}"></option>
                                    </select>

                                </li>
                                <li>
                                    <p>类型：</p>
                                    <select name="valueType" id="valueType" class="form-control">
                                        <option value="">请选择</option>
                                        <option value="1">项目</option>
                                        <option value="2">职能部门</option>
                                    </select>
                                </li>
                                <li>
                                    <p>职能部门名称/项目名称：</p>
                                    <select class="form-control noselect2" id="depOrProName" name="depOrProName">
                                        <option value="">请选择</option>
                                    </select>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>


                    </div>
                </form>
            </div>
            <from id="ordinary-form">
                <div class="col-sm-12 select-table table-striped">
                    <h4 class="form-header h4">项目费用</h4>
                    <div class="btn-group-sm">
                        <a class="btn btn-success" onclick="$.modal.open('新增项目年费用',addProUrl);"
                           shiro:hasPermission="outPutValue:add">
                            <i class="fa fa-plus"></i> 新增项目年费用
                        </a>
                    </div>

                    <table id="planValue"></table>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <h4 class="form-header h4">职能费用</h4>
                    <div class="btn-group-sm">
                        <a class="btn btn-success" onclick="$.modal.open('新增职能部门年费用',DepaddUrl);"
                           shiro:hasPermission="outPutValue:add">
                            <i class="fa fa-plus"></i> 新增职能部门年费用
                        </a>
                    </div>

                    <table id="actualValue"></table>
                </div>
            </from>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>

<script th:inline="javascript">
    var prefix = ctx + "expenseReport";

    var expenseReportPrefix = ctx + "expenseReport";
    var addProUrl = expenseReportPrefix + "/addProValue";
    var editPlanUrl = expenseReportPrefix + "/editProValue?id=";
    var DepaddUrl = expenseReportPrefix + "/addDepValue";
    var DepeditUrl = expenseReportPrefix + "/editDepValue?id=";

    var type;
    var id;
    var proUrl;
    var DepUrl;


    $(function () {


        type = [[${type}]];
        id = [[${id}]];
        if (type != null && id != null) {
            proUrl = ctx + "expenseReport/findProList?type=" + type + "&id=" + id;
            DepUrl = ctx + "expenseReport/findDepList?type=" + type + "&id=" + id;
        }else{
            proUrl = ctx + "expenseReport/findProList";
            DepUrl = ctx + "expenseReport/findDepList";
        }




        $("#valueType").change(function () {
            compId = $("#compId option:selected").val();
            var valueType = $("#valueType option:selected").val();

            $.ajax({
                url: prefix + '/findProByCompId',
                data: {
                    "compId": compId,
                    "valueType": valueType
                },
                success: function (data) {
                    $("#depOrProName").find("option").remove();
                    $("#depOrProName").append('<option value="">请选择</option>');
                    // if ($("#compId option:selected").val() == "") {
                    //     $("#proName").append('<option value="">请选择</option>')
                    // }
                    for (var i in data.data) {
                        html = data.data[i].depOrProName;
                        value = data.data[i].depOrProName;
                        $("#depOrProName").append('<option value="' + html + '">' + html + '</option>')
                    }
                }
            })
        });




        var planOptions = {
            url: proUrl,
            id: "planValue",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "项目费用",
            columns: [ {
                field: 'compName',
                title: '工程公司'
            }, {
                field: 'depOrProName',
                title: '项目名称',

            }, {
                field: 'year',
                title: '年份'
            }, {
                field: 'january',
                title: '一月'
            }, {
                field: 'february',
                title: '二月'
            }, {
                field: 'march',
                title: '三月'
            }, {
                field: 'april',
                title: '四月'
            }, {
                field: 'may',
                title: '五月'
            }, {
                field: 'june',
                title: '六月'
            }, {
                field: 'july',
                title: '七月'
            }, {
                field: 'august',
                title: '八月'
            }, {
                field: 'september',
                title: '九月'
            }, {
                field: 'october',
                title: '十月'
            }, {
                field: 'november',
                title: '十一月'
            }, {
                field: 'december',
                title: '十二月'
            }, {
                field: 'total',
                title: '合计(万元)'
            },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" onclick="$.modal.open(\'填写项目月费用\',\'' + editPlanUrl + row.id + '\')" href="#"><i class="fa fa-edit" ></i>填写项目月费用</a> ');
                        return actions.join('');
                    }
                },]
        }
        $.table.init(planOptions);

        var actualValueOptions = {
            url: DepUrl,
            id: "actualValue",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "职能费用",
            columns: [{
                field: 'compName',
                title: '工程公司'
            }, {
                field: 'depOrProName',
                title: '项目名称',

            }, {
                field: 'year',
                title: '年份'
            }, {
                field: 'january',
                title: '一月'
            }, {
                field: 'february',
                title: '二月'
            }, {
                field: 'march',
                title: '三月'
            }, {
                field: 'april',
                title: '四月'
            }, {
                field: 'may',
                title: '五月'
            }, {
                field: 'june',
                title: '六月'
            }, {
                field: 'july',
                title: '七月'
            }, {
                field: 'august',
                title: '八月'
            }, {
                field: 'september',
                title: '九月'
            }, {
                field: 'october',
                title: '十月'
            }, {
                field: 'november',
                title: '十一月'
            }, {
                field: 'december',
                title: '十二月'
            }, {
                field: 'total',
                title: '合计(万元)'
            },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" onclick="$.modal.open(\'填写项目月费用\',\'' + DepeditUrl + row.id + '\')" href="#"><i class="fa fa-edit" ></i>填写职能月费用</a> ');
                        return actions.join('');
                    }
                },]
        }
        $.table.init(actualValueOptions);
    })

    function searchValue() {
        $("#planValue").bootstrapTable('refresh');
        $("#actualValue").bootstrapTable('refresh');
    }

    function resetValue() {
        $.form.reset();
        $("#planValue").bootstrapTable('refresh');
        $("#actualValue").bootstrapTable('refresh');


    }
</script>
</body>

</html>